<template>
  <el-dialog title="修改文章" :visible="showDialog" width="42%" @close="onClose" @closed="onClosed" @open="onOpen">
    <el-form ref="formRef" label-width="80px" :model="form" :rules="formRules">
      <!-- 新增的表单 -->
      <el-form-item label="文章标题" prop="title">
        <el-input placeholder="请输入文章标题" v-model="form.title" />
      </el-form-item>
      <el-form-item label="文章内容" prop="articleBody">
        <quill-editor ref="quillEditor" class="editor" v-model="form.articleBody" :options="editorOption" />
      </el-form-item>
      <el-form-item label="视频地址" prop="videoURL">
        <el-input placeholder="请输入视频地址" v-model="form.videoURL" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="onClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="onConfirm">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 导入接口
import { details, update } from '@/api/hmmm/articles.js'

// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  ['image', 'link'] // 链接、图片、视频-----['link', 'image', 'video']
]
export default {
  name: 'ArtModify',
  data() {
    return {
      content: null,
      editorOption: {
        placeholder: '',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      },
      form: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      formRules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
      }
    }
  },
  props: {
    // 控制对话框的显示和隐藏
    showDialog: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      required: true
    }
  },
  methods: {
    // 对话框打开时候的处理函数
    async onOpen() {
      const result = await details(this.id)
      // console.log(result)
      this.form = result.data
    },
    // 点击了取消按钮
    onClose() {
      this.$emit('update:showDialog', false)
    },
    onClosed() {
      // 主要清理数据
      this.$emit('update:id', '')
      this.$refs.formRef.resetFields()
    },
    // 点击了确认按钮
    onConfirm() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return

        await update(this.form)

        this.$message.success('修改成功！')
        this.$emit('reload')
        this.$emit('update:showDialog', false)
      })
    }
  }
}
</script>

<style>
.ql-editor {
  height: 200px;
}
/* 解决元素对齐问题 */
.ql-snow .ql-picker-label::before {
  position: relative;
  top: -8px;
}

/* 解决元素对齐问题 */
.ql-picker-label > svg {
  position: relative;
  top: -6px;
}
</style>
